 <script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue'
	import { edit, getPageRecords, getAllRecords, getRecordById, editDuty } from '@/api/psychology/record.js'
	import { useExport } from '../../../hooks/useExport.js'
	import { EXPORT_FILE_URL } from '../../../enum/exportFileUrl.js'
	import noNetwork from '../../../uni_modules/uview-plus/libs/config/props/noNetwork.js'
	import TnPopup from '../../../node_modules/@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue' 
	import { TRUE } from 'sass'

	let allRecords = ref([]);
	let nowState = ref();
	onMounted(() => {
		getPage('');
	});
	const test = ref('');
	const number = ref();
	let curNow = ref('2'); 

	const getPage = (state : any) => {
		nowState.value = state
		let item1 = {
			"current": 1,
			"size": 5,
			"consAdvisoryState": state
		}
		getPageRecords(item1).then((res) => {
			allRecords.value = res.data.data.records;
			test.value = res.data.data.records[0].reservationStartTime;
			console.log('res', res)
			number.value = res.data.data.total;
		}).catch((error) => {
			console.error('error:', error);
		})
	}
	 

	const changePage = (e, date = null) => {
		console.log("number", number.value);
		let item = {
			"current": e.current,
			"size": 5,
			"consAdvisoryState": nowState.value,
			"reservationDate": date
		}
		getPageRecords(item).then((res) => {
			console.log('res:', res)
			if (res.data.data.records.length <= 5 && res.data.data.records.length > 0) {
				allRecords.value = res.data.data.records;
				console.log('len:', res.data.data.records.length)
			} else if (res.data.data.records.length == 0) {
				allRecords.value = '';
				console.log('allRecords.value: ', allRecords.value);
			}
		}).catch((error) => {
			console.error('error:', error);
		})
	}
	const selectMenu1 = ['全部类型', '已完成', '待审批', '预约成功', '已取消', '未同意']
	const select1 = (index : any, val : any, e) => {
		console.log("选择了 " + val);
		// 状态:预约中:1,已退回:-1,预约成功:99,已完成:100,已取消:-100
		const stateArray = ['', 100, 1, 99, -100, -1];
		nowState.value = stateArray[index];
		getPage(nowState.value);
	}

	const showPopup1 = ref(false);
	const record = ref([]);
	const flag = ref(false);
	let fullDate = ref();
	const open = (id : any) => {
		let item = {
			"id": id
		}
		getRecordById(item).then((res) => {
			console.log('res22131:', res)
			record.value = res.data.data;
			console.log(record.value)
			showPopup1.value = true;
		}).catch((error) => {
			console.error('error:', error);
		})

	}
	const yes = () => {
		showPopup1.value = false;
	}
	const backToMain = () => {
		uni.navigateTo({
			url: '/pages/index/home/home'
		})
	}
	const sectionChange = (index : any) => {
		curNow.value = index;
		switch (index) {
			case 0:
				uni.navigateTo({
					url: '/pages/appointment/index'
				})
				break;
			case 1:
				uni.navigateTo({
					url: '/pages/appointment/apmByCnUser/apmByCnUser'
				})
				break;
			case 2:
				uni.navigateTo({
					url: '/pages/appointment/record/index'
				})
				break;

		}
	}

	const selectedChange = (e) => {
		fullDate.value = e.fullDate;

		let item = {
			"consAdvisoryState": nowState.value,
			"reservationDate": fullDate.value,
			"current": 1,
			"size": 5,
		}
		getPageRecords(item).then((res) => {
			allRecords.value = res.data.data.records;
			test.value = res.data.data?.records[0]?.reservationStartTime;
			console.log('res111111', res)
			number.value = res.data.data.total;
			console.log('res111111', number.value)
		}).catch((error) => {
			console.error('error:', error);
		})

	}

	// 筛选
	const sift = () => {
		let item = {
			"consAdvisoryState": nowState.value,
			"reservationDate": fullDate.value,
			"current": 1,
			"size": 5,
		}
		getPageRecords(item).then((res) => {
			allRecords.value = res.data.data.records;
			test.value = res.data.data?.records[0]?.reservationStartTime;
			console.log('res111111', res)
			number.value = res.data.data.total;
			console.log('res111111', number.value)
		}).catch((error) => {
			console.error('error:', error);
		})
	}

	// 重置
	const selectMenuRef = ref(null);
	const reset = () => {
		nowState.value = '';
		fullDate.value = '';
		getPage('');
		selectMenuRef.value.setCurrentIndex(0);

	}
	const items =ref({});
	const preCancel = (item : any) => { 
		items.value = item;
		showPopup.value = true;
	}
	
	const cancel = () => {
		let item = {
			"id": items.value?.id,
			"consAdvisoryState": -100
		}
		let dutyItem = {
			'id': items.value?.consCnDutyId,
			"consCnDutyState": "0"
		}
	
		edit(item).then((res) => { 
			editDuty(dutyItem).then((res) => {
				if (res.data.success) {
					showPopup.value = false;
					sift();
					uni.showToast({
						title: '取消预约成功',
						icon: 'success',
						duration: 2000
					})
				}
			})
	
		})
			.catch((error) => {
				console.error('error:', error);
			})
		getPage(nowState.value)
	}
	// 占空位  
	const white = computed(() => {
		return 5 - allRecords.value?.length;
	})
	const showPopup = ref(false)
	const exit = (() => {
		showPopup.value = false 
	})
	const timer = ref(null)
	const handleEnd = () => {
		timer.value.resetTime()
	}
 </script>
 <template>
	 <articleTable ref="timer"></articleTable>
 	<img :src="'@/../static/img/appoint/appoint-bg.svg'"
 		style="opacity: 0.2;width: 45%;position: absolute;top: 50%;right: 0;z-index: 0;" />
 	<Navigator :fixed="true" background-color="transparent" status-bar left-icon="back" left-text="返回" title="心理预约"
 		@clickLeft="backToMain" customLeft class="absolute">
 	</Navigator>

 	<view @touchend="handleEnd" class="wh100p body flex-column " style="justify-content: center; align-items: center;">
			<view class="w100p h100p flex-column" style="padding:1% 2%;box-sizing: border-box;z-index: 50;">
 			<view class="flex-between w100p column-center">
 				<view style="width:600rpx;" class="mt30">
 					<view class=" gui-dark-bg-level-3  gui-margin-top cus2" style="padding:10px 0">
 						<gui-switch-navigation :items="[{id:0,name:'选择时间预约'},{id:1,name:'选择老师预约'},{id:1,name:'预约记录'}]"
 							textAlign="center" :isCenter="false" activeDirection="center" :size="0" :margin="20"
 							padding="10rpx" activeLineHeight="6rpx" scorllAnimation="true" activeFontSize="34px"
 							fontSize="32px" lineHeight="46px" :width="1800" :titleClass="['color56A5FF']"
 							@change="sectionChange" :currentIndex="curNow"></gui-switch-navigation>
 					</view>
 				</view>
 			</view>

 			<!-- 弹出框 -->
 			<TnPopup v-model="showPopup1" :overlay-closeable="false" width="50%" height="80%" :z-index="999"
 				:radius="60">
 				<view style="display: flex;align-items: center;color: white;height: 8%;background: #013F95;">
 					<view
 						style="flex: 1;display: flex;align-items: center;justify-content: space-between;padding: 16px 32px;">
 						<text style="text-align: center;font-size: 2rem;">预约详情</text>
 						<u-icon @click="yes" name="close" color="#2979ff" size="28"></u-icon>
 					</view>
 				</view>

 				<view class="tn-p-lg"
 					style="width: 100%;background: linear-gradient(90deg, #49BEFF 0%, #3186FC 100%);color: white;overflow: scroll;height: 80%;">
 					<view
 						style="display: flex;flex-direction: column;padding:1rem;font-size: 1.2rem;margin-bottom: 50rpx;">
 						<view style="padding: 24px 32px 50px 32px;">
 							<view style="display: flex;justify-content: flex-start;width: 100%;">
 								<view style="padding: 0 64rpx;display: flex;">
 									<view class="mr20">
 										<img :src="record?.cnUser?.avatar"
 											style="width: 260rpx;height: 260rpx;border-radius: 126rpx;" />
 									</view>
 									<view style="display: flex;flex-direction: column;">
 										<view style="font-weight: bold;font-size: 2.5rem;">
 											{{record?.cnUser?.realName}}
 										</view>
 										<view style="margin-top: 30rpx;font-size: 1.7rem;">如果你有需要，我一直都在</view>
 									</view>
 									<!-- <view v-if="record?.consAdvisoryState == 1 || record?.consAdvisoryState == 99"
 										style="margin-left: 300rpx;">
 										<view class="gui-button gui-noborder">
 											<text @click="preCancel(record?.id)"
 												class="gui-icons gui-color-red gui-button-text;"
 												style="font-size: 2rem;">取消预约</text>
 										</view>
 									</view> -->
 								</view>
 							</view>

 							<view
 								style="display: flex;width: 100%;justify-content: center;font-size: 1.8rem;margin-top: 40rpx;">
 								<view style="display: felx;flex-direction: column;text-align: center;width: 50%;">
 									<view style="color: #A3CEFF;margin-bottom: 50rpx;">咨询地点</view>
 									<view v-if="record?.consAdvisoryState ==  0">{{record?.consRoom?.name}}</view>
 									<view v-else>待定</view>
 								</view>

 								<view style="display: felx;width: 50%;">
 									<view style="color: #A3CEFF;margin-bottom: 50rpx;"> 本次咨询时间 </view>
 									<view>
 										{{record?.reservationDate}}
 									</view>
 								</view>
 							</view>
 						</view>

 						<view style="display: flex;justify-content: center;">
 							<view
 								style="margin-top:30rpx;font-size: 1.6rem;padding:3% 10%;border-radius: 50rpx;background: rgba(27, 111, 211, 0.80);width: 70%;">
 								<view
 									style="display: flex;width: 100%;justify-content: center;font-size: 1.8rem;margin-top: 40rpx;">
 									<view style="display: felx;flex-direction: column;width: 50%;">
 										<view style="color: #A3CEFF;margin-bottom: 50rpx;">咨询日期</view>
 										<view> {{record?.reservationDate}}</view>
 									</view>

 									<view style="display: felx;width: 50%;">
 										<view style="color: #A3CEFF;margin-bottom: 50rpx;"> 具体时段 </view>
 										<view>
 											{{record?.reservationStartTime?.substring(10,)}}--{{record?.reservationEndTime?.substring(10,)}}
 										</view>
 									</view>
 								</view>

 								<view style="width: 100%;margin-top: 60rpx;">
 									<view style="color: #A3CEFF;margin-bottom: 50rpx;"> 联系方式 </view>
 									<view> {{record?.stuPhone}} </view>
 								</view>

 								<view v-for="(item,index) in record?.problemList" :key="index"
 									style="margin-top: 60rpx;">
 									<view v-if="item.value">
 										<text style="color: #A3CEFF;">问题{{index+1}}-{{item.name}}?
 										</text>
 										<view style="text-indent: 2rem;margin-top: 20rpx">
 											{{item.value}}
 										</view>
 									</view>
 								</view>
 							</view>
 						</view>
 					</view>


 					<view>
 						<view v-if="record?.consResult">
 							<span style="line-height:80rpx;font-weight: bold;color: darkgray;">辅导结论：</span>
 							<text>{{record?.consResult}}</text>
 						</view>
 						<button v-if="record?.consAdvisoryState ==100" style="width: 40%;" type="default"
 							class="gui-button gui-bg-green gui-noborder"
 							@click="()=> useExport({id:record?.id},EXPORT_FILE_URL.CONS_ADVISORY_PDF)">
 							<text class="gui-icons gui-color-white gui-button-text">下载报告</text>
 						</button>
 					</view>
 				</view>

 				<view
 					style="display: flex;align-items: center;color: white;height: 12%;background: #013F95;justify-content: flex-end;">
 					<!-- 弹出框的按钮操作 -->
 					<!-- <view
 						style="border-radius: 12px;display: flex;font-size: 28px;text-align: center;color: #FFF;line-height: 32px;padding: 8px 24px;border: 1px solid #FFF;margin-right: 2%; ">
 						取消
 					</view>
 					<view
 						style="border-radius: 12px;display: flex;font-size: 28px;text-align: center;color: #FFF;line-height: 32px;padding: 8px 24px;margin-right: 2%;background: linear-gradient(90deg, #49BEFF 0%, #3186FC 100%), linear-gradient(318deg, #00C572 9.15%, #34DD96 109.02%); ">
 						确认
 					</view> -->
 				</view>
 			</TnPopup>

<!-- 取消预约之前 -->
<u-modal :show="showPopup" showCancelButton width="550rpx" @confirm="cancel" @cancel="exit"
			confirmColor='#0078BB'>
			<view>
				<text style="font-size: 1rem;">是否确定取消预约？</text>
			</view>
		</u-modal>
		
		
 			<view style="width: 100%;display: flex;justify-content: center;height: 100%;margin-top: 1%;">
 				<veiw
 					style="background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.80) 50%, rgba(255, 255, 255, 0.00) 100%);height: 0.5%;position: absolute;z-index: 99;width: 46%;">
 				</veiw>
 				<view
 					style="width: 90%;border-radius: 24rpx;background: rgba(0, 0, 0, 0.20);padding: 50rpx 80rpx 0 80rpx">
 					<!-- 上栏 -->
 					<view style="display: flex;align-items: center;width: 100%;height:10%;">

 						<view style="width: 50%;display: flex;">
 							<!-- 选择类型 -->
 							<view class="custom   cus"
 								style="color:white;background-color: rgb(0,65,112);width: 600rpx;height: 100rpx;border: 1px solid white;">
 								<gui-select-menu :items="selectMenu1" @select="select1" ref="selectMenuRef"
 									:isH5header="false" width="100%" height="100%" fontSize="48rpx">
 								</gui-select-menu>
 							</view>
 							<!-- 选择日期 -->
 							<view class="flex column-center  " style="margin-left: 1%;margin-right: 1%">
 								<view class="flex column-center" @click="flag = true"
 									style="border-radius: 12px;border: 1px solid white;background: rgba(0, 0, 0, 0.10);">
 									<button type="default" class="gui-button  gui-noborder vAlign-center"
 										style="border-radius:50rpx;height:100rpx;background: rgba(0, 0, 0, 0.10);width: 600rpx;">
 										<text class="gui-icons gui-color-white   "
 											style="padding:0 20px;text-indent: 1rem">
 											<text v-if="!fullDate"
 												style="margin-right:10px;font-size: 24px;;">请选择日期</text>
 											<text v-else
 												style="margin-right:10px;font-size: 24px;">{{fullDate}}</text><text
 												style="margin-left:10px;font-size: 24px;">&#xe6d1;</text>
 										</text>
 									</button>
 								</view>
 								<view class="bgfffff calendar-outBox absolute mt14" :class="flag? 'show':'hide'"
 									style="width: 350px;height: 330px;background: linear-gradient(180deg, #49BEFF 0%, #3186FC 100%), #FAFAFA;color: white;border-radius: 10px;padding: 10px;right: 2%;z-index: 3;">
 									<view class=" flex-column">
 										<view class="w100p flex-end ">
 											<view style="padding: 0 10px;" @click="flag = false">
 												<u-icon name="close" color="#2979ff" size="18"></u-icon>
 											</view>
 										</view>
 										<view class="calendar-box pt12">
 											<zzx-calendar @selected-change="selectedChange"></zzx-calendar>
 										</view>
 									</view>
 								</view>
 							</view>
 						</view>

 						<view style="width: 50%;display: flex;justify-content: flex-end;2">
 							<!-- 按钮操作 -->
 							<button type="default" class="gui-button  gui-noborder" style="border-radius: 12px;width: 15%;display: flex;justify-content: center;align-items: center;height: 100rpx;font-size: 24px; 
	background: linear-gradient(90deg, #49BEFF 0%, #3186FC 100%);" @click="sift">
 								<text class="gui-color-white gui-button-text "
 									style="line-height: 32px;font-size: 24px;">筛选</text>
 							</button>
 							<view style="width: 1%;"></view>
 							<button type="default" class="gui-button  gui-noborder" style="border-radius: 12px;width: 15%;display: flex;justify-content: center;align-items: center;height: 100rpx;font-size: 24px; 
	background: linear-gradient(90deg, rgba(73, 190, 255, 0.50) 0%, rgba(49, 134, 252, 0.50) 100%);" @click="reset">
 								<text class="gui-color-white gui-button-text"
 									style="line-height: 32px;font-size: 24px;">重置</text>
 							</button>
 						</view>
 					</view>
 					<view
 						style="width: 100%;height: 80%;display: flex;justify-content: center;flex-flow:column;margin-top: 1%;">

 						<!-- 表格 -->
 						<table style="width: 100%;height: 80%;border-collapse: collapse;border: none;">
 							<tr style="color: white;font-size: 48rpx;height: 20%;">
 								<th width="15%">咨询师姓名</th>
 								<th width="15%">预约日期</th>
 								<th width="20%">预约时段</th>
 								<th width="15%">咨询地点</th>
 								<th width="15%">状态</th>
 								<th width="20%">操作</th>
 							</tr>

 							<tr v-for="(item,index) in allRecords" style="text-align: center;height: 16%;">
 								<td>{{item?.cnUser?.realName}}</td>
 								<td>{{item?.reservationDate}}</td>
 								<td>{{item?.reservationStartTime.substring(10, )}}--{{item?.reservationEndTime.substring(10, )}}
 								</td>
 								<td>{{item?.consRoom?.name}}</td>
 								<td> {{item?.consAdvisoryStateStr}} </td>
 								<td>
 									<text
 										style="width: 200rpx;height: 50rpx;margin-right: 20rpx;color: #348BFD;z-index:50"
 										@click="open(item?.id)">查看详情</text>
 									<text v-if="item?.consAdvisoryState == 99 || item?.consAdvisoryState == 1"
 										style="width: 200rpx;height: 50rpx;color:red;z-index: 50;"
 										@click="preCancel(item)">取消预约</text>

 								</td>
 							</tr>
 							<tr v-for="(item,index) in white" style="text-align: center;border: none;">
 								<td>
 									<view style="width: 200rpx;height: 50rpx;margin-right: 20rpx;z-index:50"> </view>

 								</td>
 							</tr>
 							<view v-if="white == 5" class="flex-center"
 								style="position: absolute;z-index: 999;top:60%;left:50%">
 								<gui-empty>
 									<template v-slot:img>
 										<view class="gui-flex gui-rows gui-justify-content-center">
 											<text
 												class="gui-icons gui-empty-icon gui-color-white font72">&#xe644;</text>
 										</view>
 									</template>
 									<template v-slot:text>
 										<text
 											class=" gui-block gui-text-center gui-margin-top gui-color-white font32">暂无数据</text>
 									</template>
 								</gui-empty>
 							</view>

 						</table>
 						<view class="w100p custom">
 							<uni-pagination class="" :total="number" prev-text="上一页" next-text="下一页" pageSize="5"
 								@change="changePage" style="margin-top: 4%;" />
 						</view>
 					</view>

 				</view>
 			</view>
 		</view>


 	</view>


 </template>

 <style>
 	.body {
 		background: linear-gradient(90deg, #0078BB 0%, #003E94 100%);
 	}

 	td {
 		/* border-collapse: collapse; */
 		font-size: 48rpx;
 		color: white;
 		/* border-bottom: 1px solid rgba(232, 232, 233, 0.30); */
 	}

 	th {
 		border-bottom: 1rpx solid rgb(255, 255, 255);
 		background: #1E65C2;
 	}

 	tr {
 		border-bottom: 1px solid var(---Light-Gary, #E8E8E9);

 	}

 	.time {
 		margin-top: 26upx;
 		margin-right: 20upx;
 		color: #808080;
 		font-size: 28upx;
 		display: flex;

 		image {
 			display: block;
 			width: 30upx;
 			height: 30upx;
 			margin-left: 30upx;
 			margin-top: 5upx;
 		}
 	}

 	/deep/.cus2 .gui-primary-text {
 		color: white;
 	}

 	.custom {
 		border-radius: 12px;
 	}

 	/deep/.custom .gui-masker {
 		background-color: transparent;
 	}

 	/deep/.custom .gui-masker {
 		background-color: transparent;
 	}

 	/deep/.custom .gui-select-menu {
 		width: 8rem;
 		left: 16%;
 	}

 	/deep/.custom .gui-select-menu text {
 		color: black;

 	}

 	/deep/.custom .gui-select-menu-title .gui-primary-text {
 		color: white;
 		/* width: 200rpx; */
 		/* font-size: 48px; */
 		/* padding: 8px 24px; */
 	}

 	/deep/.custom .gui-select-menu-title .gui-primary-text span {
 		color: white;
 		/* width: 200rpx; */
 		/* font-size: 128px; */
 		/* padding: 8px 24px; */
 	}

 	/deep/.cus .gui-primary-text span {
 		/* color:white; */

 		/* font-size: 128px; */
 	}

 	/deep/.custom .gui-select-menu-title {
 		/* margin-top: 5vh; */
 		height: 3rem;
 	}

 	/deep/.custom .gui-justify-content-center {
 		/* justify-content: flex-start !important; */
 		/* margin-left: 15%; */
 		/* background-color: white; */
 		width: 300rpx;
 		border-radius: 50rpx;
 		text-indent: 1rem;
 	}

 	.choise {
 		color: white;
 	}

 	.show {
 		opacity: 1;
 	}

 	.hide {
 		opacity: 0;
 		pointer-events: none;
 		/* 使隐藏元素不响应点击事件 */
 	}

 	/deep/.cus .gui-select-menu span {
 		/* color: red; */
 	}

 	/deep/.cus .gui-select-menu {
 		width: 10rem;
 	}

 	/deep/.cus .gui-justify-content-center {
 		width: 12rem;
 	}
	
	/deep/.custom .uni-pagination__num-tag {
		margin: 0 8px;
		font-size: 18px;
		padding: 0 10px;
	}
	
	/deep/.custom .uni-pagination__total {
		font-size: 18px;
		color: white;
		margin-right: 20px;
	}
	
	/deep/.custom .uni-pagination__child-btn {
		font-size: 18px;
	
	}
 </style>